<template>
  <div class="universe-tips">
    <div class="tip-header">
      <span class="tip-icon">💡</span>
      <span class="tip-title">宇宙小知识</span>
    </div>
    <div class="tip-content">{{ currentTip }}</div>
    <button class="next-tip-btn" @click="nextTip">下一条</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tips: [
        "平行宇宙理论认为，每个决定都会创造一个新的宇宙分支。",
        "在平行宇宙中，物理定律可能完全不同。",
        "量子力学的多世界解释支持平行宇宙的存在。",
        "在某个平行宇宙中，你可能正在读一本关于这个宇宙的书。",
        "平行宇宙的数量可能是无限的。",
        "有些科学家认为黑洞可能是通往平行宇宙的入口。"
      ],
      currentTipIndex: 0
    };
  },
  computed: {
    currentTip() {
      return this.tips[this.currentTipIndex];
    }
  },
  methods: {
    nextTip() {
      this.currentTipIndex = (this.currentTipIndex + 1) % this.tips.length;
    }
  },
  mounted() {
    // 每30秒自动切换到下一条提示
    setInterval(this.nextTip, 30000);
  }
}
</script>

<style scoped>
.universe-tips {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.tip-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.tip-icon {
  font-size: 1.5em;
  margin-right: 10px;
}

.tip-title {
  font-weight: bold;
  color: var(--primary-color);
}

.tip-content {
  font-style: italic;
  color: #555;
  line-height: 1.5;
  min-height: 3em;
}

.next-tip-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-top: 10px;
  font-size: 0.9em;
}

.next-tip-btn:hover {
  color: var(--secondary-color);
}
</style>